<template>
  <div class="scan">
    <header id="header" class="mui-bar mui-bar-nav">
      <h1 class="mui-title">二维码扫描</h1>
    </header>
    <div class="mui-content">
      <div id="bcid" v-if="isApp"></div>
    </div>
    <nav class="mui-bar mui-bar-tab cancel" v-tap="{method:cancel}">
      <div class="mui-tab-item">
        <span class="mui-tab-label">取消</span>
      </div>
    </nav>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        scan:null,
        isApp:false,
      }
    },
    created(){
      var that = this;
      mui.plusReady(function() {
        that.isApp=true;
        that.doscan();
      });
    },
    mounted(){
    },
    beforeDestroy(){
      var that = this;
      mui.plusReady(function() {
        that.scan.close();
      });
    },
    methods:{
      cancel(){
        var that = this;
        that.$router.go(-1);
      },
      doscan(){
        var that = this;
        mui.plusReady(function() {
          that.scan = new plus.barcode.Barcode("bcid");
          that.scan.onmarked = that.onmarked;
          that.scan.start();
        });
      },
      onmarked(type, result, file) {
        var that = this;
        switch(type) {
          case plus.barcode.QR:
            type = 'QR';
            break;
          case plus.barcode.EAN13:
            type = 'EAN13';
            break;
          case plus.barcode.EAN8:
            type = 'EAN8';
            break;
          default:
            type = '其它' + type;
            break;
        }
        result = result.replace(/\n/g, '');
        if(!/^1[345789]\d{9}$/.test(result)){
          mui.alert('请扫描系统二维码','','确定',function () {
            that.cancel();
          });
          return;
        }
        var userInfo = that.$store.state.user.userInfo;
        if(userInfo.mobile==result){
          mui.alert('只允许向他人转账','','确定',function () {
            that.cancel();
          });
          return;
        }
        that.$router.replace({
          name:'payment',
          params:{
            phone:result
          }
        });
      },
    }
  }
</script>

<style scoped lang="less">
.scan{
  .mui-content{
    #bcid {
      width: 100%;
      position: absolute;
      top: 44px;
      bottom: 50px;
      text-align: center;
      .tip {
        color: #FFFFFF;
        font-weight: bold;
        text-shadow: 0px -1px #103E5C;
      }
    }
  }
  .cancel{
    background: #6671ff;
    -webkit-box-shadow: 0 0 1px #ccc;
    box-shadow: 0 0 1px #ccc;
    .mui-tab-item{
      color: #fff;
    }
  }
}
</style>
